<template>
  <el-row>
    <el-row style="height: 26px;" class="title-text">
      <span style="line-height: 26px;font-size: 14px;">
        {{ param.tableId?$t('dataset.edit_union'):$t('dataset.add_union_table') }}
      </span>
      <el-row style="float: right">
        <el-button size="mini" @click="cancel">
          {{ $t('dataset.cancel') }}
        </el-button>
        <el-button :disabled="!name || dataset.length === 0" size="mini" type="primary" @click="save">
          {{ $t('dataset.confirm') }}
        </el-button>
      </el-row>
    </el-row>
    <el-divider />
    <div>
      <el-form :inline="true" style="display: flex;align-items: center;justify-content: space-between;">
        <el-form-item class="form-item" :label="$t('commons.name')">
          <el-input v-model="name" size="mini" :placeholder="$t('commons.name')" clearable />
        </el-form-item>
        <el-form-item class="form-item">
          <el-button :disabled="dataset.length === 0" size="mini" @click="previewData">
            {{ $t('dataset.preview_result') }}
          </el-button>
        </el-form-item>
      </el-form>
      <!--添加第一个数据集按钮-->
      <div v-if="dataset.length === 0">
        <el-button type="primary" size="mini" @click="selectDs">
          {{ $t('chart.select_dataset') }}
        </el-button>
      </div>
      <!--数据集关联树型结构-->
      <div v-else class="union-container">
        <node-item
          :current-node="dataset[0]"
          :node-index="0"
          :origin-data="dataset"
          @deleteNode="deleteNode"
          @notifyParent="calc"
          @editUnion="unionConfig"
          @cancelUnionEdit="cancelUnion"
        />
        <div v-if="dataset.length > 0">
          <union-node
            v-for="(item,index) in dataset[0].childrenDs"
            :key="index"
            :node-index="index"
            :children-node="item"
            :children-list="dataset[0].childrenDs"
            :parent-node="dataset[0]"
            :origin-data="dataset"
            @notifyParent="calc"
            @cancelUnionEdit="cancelUnion"
          />
        </div>
      </div>
    </div>

    <!--选择数据集-->
    <el-dialog v-if="selectDsDialog" v-dialogDrag :title="$t('chart.select_dataset')" :visible="selectDsDialog" :show-close="false" width="400px" class="dialog-css">
      <dataset-group-selector-tree :fix-height="true" show-mode="union" :custom-type="customType" clear-empty-dir="true" @getTable="firstDs" />
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="closeSelectDs()">{{ $t('dataset.cancel') }}</el-button>
        <el-button :disabled="!tempDs.id" type="primary" size="mini" @click="confirmSelectDs()">{{ $t('dataset.confirm') }}</el-button>
      </div>
    </el-dialog>

    <!--编辑关联关系-->
    <el-dialog v-if="editUnion" v-dialogDrag top="5vh" :title="unionParam.type === 'add' ? $t('dataset.add_union_relation') : $t('dataset.edit_union_relation')" :visible="editUnion" :show-close="false" width="600px" class="dialog-css">
      <union-edit :union-param="unionParam" />
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="closeEditUnion()">{{ $t('dataset.cancel') }}</el-button>
        <el-button type="primary" size="mini" @click="confirmEditUnion()">{{ $t('dataset.confirm') }}</el-button>
      </div>
    </el-dialog>

    <!--数据预览界面-->
    <el-drawer v-if="showPreview" :title="$t('dataset.preview_result')" :visible.sync="showPreview" direction="btt" class="preview-style">
      <union-preview :table="previewTable" :dataset="dataset" />
    </el-drawer>
  </el-row>
</template>

<script>
import UnionNode from '@/views/dataset/add/union/UnionNode'
import NodeItem from '@/views/dataset/add/union/NodeItem'
import DatasetGroupSelectorTree from '@/views/dataset/common/DatasetGroupSelectorTree'
import UnionEdit from '@/views/dataset/add/union/UnionEdit'
import { post } from '@/api/dataset/dataset'
import UnionPreview from '@/views/dataset/add/union/UnionPreview'
export default {
  name: 'AddUnion',
  components: { UnionPreview, UnionEdit, DatasetGroupSelectorTree, NodeItem, UnionNode },
  props: {
    param: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      // mock data，结构比较复杂，需要这个结构多看看...
      datasetMock: [{
        currentDs: {},
        currentDsField: [],
        childrenDs: [
          {
            currentDs: {},
            currentDsField: [],
            childrenDs: [],
            unionToParent: {
              unionType: 'left', // left join,right join,inner join
              unionFields: [
                {
                  parentField: {},
                  currentField: {}
                }
              ]
            },
            allChildCount: 0
          }
        ],
        unionToParent: {},
        allChildCount: 0
      }],
      // union data
      dataset: [],
      // union item
      unionItem: {
        currentDs: {},
        currentDsField: [],
        childrenDs: [],
        unionToParent: {
          unionType: 'left',
          unionFields: []
        },
        allChildCount: 0
      },
      name: '关联数据集',
      customType: ['db', 'sql', 'excel', 'api'],
      selectDsDialog: false,
      // 弹框临时选中的数据集
      tempDs: {},
      editUnion: false,
      unionParam: {},
      showPreview: false,
      previewTable: {}
    }
  },
  watch: {
    'param.tableId': function() {
      this.resetComponent()
      this.initTableData()
    }
  },
  mounted() {
    this.initTableData()
  },
  methods: {
    save() {
      if (!this.name || this.name === '') {
        this.$message({
          showClose: true,
          message: this.$t('dataset.pls_input_name'),
          type: 'error'
        })
        return
      }
      if (this.name.length > 50) {
        this.$message({
          showClose: true,
          message: this.$t('dataset.char_can_not_more_50'),
          type: 'error'
        })
        return
      }
      const table = {
        id: this.param.tableId,
        name: this.name,
        sceneId: this.param.id,
        dataSourceId: this.dataset[0].currentDs.dataSourceId,
        type: 'union',
        mode: this.dataset[0].currentDs.mode,
        info: '{"union":' + JSON.stringify(this.dataset) + '}'
      }
      post('/dataset/table/update', table).then(response => {
        this.$emit('saveSuccess', table)
        this.cancel()
      })
    },
    cancel() {
      if (this.param.tableId) {
        this.$emit('switchComponent', { name: 'ViewTable', param: this.param.table })
      } else {
        this.$emit('switchComponent', { name: '' })
      }
    },
    selectDs() {
      this.selectDsDialog = true
    },
    firstDs(val) {
      this.tempDs = val
    },
    closeSelectDs() {
      this.selectDsDialog = false
      this.tempDs = {}
    },
    confirmSelectDs() {
      if (this.tempDs.mode === 0 && this.tempDs.modelInnerType === 'sql') {
        this.$message({
          showClose: true,
          message: this.$t('dataset.sql_ds_union_error'),
          type: 'error'
        })
        return
      }
      const ds = JSON.parse(JSON.stringify(this.unionItem))
      ds.currentDs = this.tempDs
      this.dataset.push(ds)
      this.closeSelectDs()
      this.calc('union')
    },
    deleteNode(index) {
      this.dataset.splice(index, 1)
      this.calc('delete')
    },
    calc(param) {
      if (param.type === 'union') {
        if (param.grandParentAdd) {
          this.dataset[0] && this.dataset[0].allChildCount++
        }
      } else if (param.type === 'delete') {
        if (param.grandParentSub) {
          if (param.subCount > 1) {
            this.dataset[0] && (this.dataset[0].allChildCount -= param.subCount)
          } else {
            this.dataset[0] && this.dataset[0].allChildCount--
          }
        }
      }
    },

    unionConfig(param) {
      this.unionParam = param
      this.editUnion = true
    },
    closeEditUnion() {
      this.editUnion = false
      // 添加关联的时候，如果关闭关联关系设置的界面，则删除子节点，同时向父级传递消息
      if (this.unionParam.type === 'add') {
        this.dataset[0].childrenDs.pop()
        this.calc({ type: 'delete', grandParentAdd: true, grandParentSub: true, subCount: 0 })
      }
    },
    confirmEditUnion() {
      // 校验关联关系与字段，必填
      if (this.checkUnion()) {
        this.editUnion = false
      } else {
        this.$message({
          message: this.$t('dataset.union_error'),
          type: 'error',
          showClose: true
        })
      }
    },
    cancelUnion(val) {
      this.dataset = val
    },

    checkUnion() {
      const union = this.unionParam.node.unionToParent
      if (!union.unionType) {
        return false
      }
      if (!union.unionFields || union.unionFields.length < 1) {
        return false
      }
      for (let i = 0; i < union.unionFields.length; i++) {
        const ele = union.unionFields[i]
        if (!ele.parentField || !ele.parentField.id || !ele.currentField || !ele.currentField.id) {
          return false
        }
      }
      return true
    },

    initTableData() {
      if (this.param.tableId) {
        post('/dataset/table/get/' + this.param.tableId, null).then(response => {
          const table = JSON.parse(JSON.stringify(response.data))
          this.name = table.name
          this.dataset = JSON.parse(table.info).union
        })
      }
    },

    previewData() {
      this.previewTable = {
        id: this.param.tableId,
        name: this.name,
        sceneId: this.param.id,
        dataSourceId: this.dataset[0].currentDs.dataSourceId,
        type: 'union',
        mode: this.dataset[0].currentDs.mode,
        info: '{"union":' + JSON.stringify(this.dataset) + '}'
      }
      this.showPreview = true
    },

    resetComponent() {
      this.dataset = []
      this.name = '关联数据集'
    }
  }
}
</script>

<style scoped>
.el-divider--horizontal {
  margin: 12px 0;
}
.union-container{
  display: flex;
  width: 100%;
  height: calc(100vh - 200px);
  overflow: auto;
}
.form-item{
  margin-bottom: 10px!important;
}
.dialog-css >>> .el-dialog__body {
  padding: 0 20px;
}
.preview-style >>> .el-drawer{
  height: 50%!important;
}
.preview-style >>> .el-drawer .el-drawer__header{
  margin-bottom: 10px!important;
  padding: 10px 16px 0!important;
  font-size: 14px;
}
.preview-style >>> .el-drawer .el-drawer__body{
  padding: 0 16px 10px!important;
}
.form-item >>> .el-form-item__label{
  font-size: 12px!important;
  font-weight: 400!important;
}
</style>
